<template>
  <div class="statics-wrap">
    <el-row class="row-wrap-one">
      <div class="document-categories">
        <div class="card-head">
          <div class="title">文件类别占比</div>
        </div>
        <div class="grid-content ep-bg-purple">
          <div id="documentCategoriesCharts" ref="documentCategoriesCharts"></div>
        </div>
      </div>
      <div class="download-rank">
        <div class="card-head">
          <div class="title">文件下载排行榜
            <el-radio-group v-model="radio1" size="small" style="float: right;" fill="#E6E8EB" @change="Handlechange1">
              <el-radio-button label="全部"/>
              <el-radio-button label="本周"/>
              <el-radio-button label="本月"/>
              <el-radio-button label="全年"/>
            </el-radio-group>
          </div>
        </div>
        <div class="grid-content ep-bg-purple-light">
          <el-table
              id="file-download-table"
              class="file-ranktable-wrap"
              :data="data.tableData1"
              highlight-current-row
              style="width: 100%"
              :cell-style="{border:'none'}"
              :header-cell-style="{border:'none',fontWeight:500}"
          >
            <el-table-column label="排名" type="index" width="70" align="left">
              <template #default="scope">
                <el-icon style="margin-left: 1rem" v-show="(currentPage1 - 1) * pageSize + scope.$index===0">
                  <TrophyBase color="#E6A23C"/>
                </el-icon>
                <el-icon style="margin-left: 1rem" v-show="(currentPage1 - 1) * pageSize + scope.$index===1">
                  <TrophyBase color="#909399"/>
                </el-icon>
                <el-icon style="margin-left: 1rem" v-show="(currentPage1 - 1) * pageSize + scope.$index===2">
                  <TrophyBase color="#aa5a14"/>
                </el-icon>
                <el-icon v-show="scope.$index > 2 || currentPage1 > 1">
                  {{ (currentPage1 - 1) * pageSize + scope.$index + 1 }}
                </el-icon>
              </template>
            </el-table-column>

            <el-table-column property="documentName" label="文档名" show-overflow-tooltip
                             min-width="100">
              <template #default="scope">
                <span class="docname-text"><component :is="fileType(scope.row.suffix)"></component>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column property="createBy" label="作者" width="70" align="center"/>
            <el-table-column property="operateCount" label="下载数" width="70" align="right"/>
          </el-table>

        </div>
        <el-pagination style="float:right;"
                       :total="data.total1"
                       :page-size="5"
                       :pager-count="5"
                       layout="prev, pager, next"
                       v-model:current-page="currentPage1"
                       @current-change="handleCurrentChange1"
        />
      </div>
      <div class="read-rank">
        <div class="card-head">
          <div class="title">文档阅读排行榜
            <el-radio-group v-model="radio2" size="small" style="float: right;" fill="#E6E8EB" @change="Handlechange2">
              <el-radio-button label="全部"/>
              <el-radio-button label="本周"/>
              <el-radio-button label="本月"/>
              <el-radio-button label="全年"/>
            </el-radio-group>
          </div>

        </div>
        <div class="grid-content ep-bg-purple">
          <el-table
              id="file-read-table"
              class="file-ranktable-wrap"
              :data="data.tableData2"
              highlight-current-row
              style="width: 100%"
              :cell-style="{border:'none'}"
              :header-cell-style="{border:'none',fontWeight:500}"
          >
            <el-table-column label="排名" type="index" width="70" align="left">
              <template #default="scope">
                <el-icon style="margin-left: 1rem" v-show="(currentPage2 - 1) * pageSize + scope.$index===0">
                  <TrophyBase color="#E6A23C"/>
                </el-icon>
                <el-icon style="margin-left: 1rem" v-show="(currentPage2 - 1) * pageSize + scope.$index===1">
                  <TrophyBase color="#909399"/>
                </el-icon>
                <el-icon style="margin-left: 1rem" v-show="(currentPage2 - 1) * pageSize + scope.$index===2">
                  <TrophyBase color="#aa5a14"/>
                </el-icon>
                <el-icon v-show="scope.$index > 2 || currentPage2 > 1">
                  {{ (currentPage2 - 1) * pageSize + scope.$index + 1 }}
                </el-icon>
              </template>
            </el-table-column>

            <el-table-column property="documentName" label="文档名" show-overflow-tooltip
                             min-width="100">
              <template #default="scope">

                <span class="docname-text"><component :is="fileType(scope.row.suffix)"></component>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column property="createBy" label="作者" width="70" align="center"/>
            <el-table-column property="operateCount" label="阅读量" width="70" align="right"/>

          </el-table>
        </div>
        <el-pagination style="float:right;"
                       :total="data.total2"
                       :page-size="5"
                       :pager-count="5"
                       layout="prev, pager, next"
                       v-model:current-page="currentPage2"
                       @current-change="handleCurrentChange2"
        />
      </div>
    </el-row>
    <el-row class="row-wrap-two">
      <div class="member-upload-rank">
        <div class="card-head">
          <div class="title">成员上传排行榜
            <div class="block" style="float:right">
              <el-config-provider :locale="zhCn">
                <el-date-picker
                    v-model="rankDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="dateChange"
                    value-format="YYYY-MM-DD"

                />
              </el-config-provider>
            </div>
            <el-radio-group v-model="radio3" size="default" class="radio3-style" fill="#E6E8EB" @change="Handlechange3">
              <el-radio-button label="全部"/>
              <el-radio-button label="本周"/>
              <el-radio-button label="本月"/>
              <el-radio-button label="全年"/>
            </el-radio-group>

          </div>

        </div>
        <div class="grid-content ep-bg-purple-dark">
          <div id="memberUploadRankCharts" ref="memberUploadRankCharts"></div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {computed, onMounted, reactive, ref} from "vue";
import FrontApi from '@/api/front'
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import TxtIcon from "@/components/document/TxtIcon";
import XmindIcon from "@/components/document/XmindIcon";
import MdIcon from "@/components/document/MdIcon";
import HexIcon from "@/components/document/HexIcon";
import ExcelIcon from '@/components/document/ExcelIcon.vue'
import WordIcon from '@/components/document/WordIcon.vue'
import PptIcon from '@/components/document/PptIcon.vue'
import UnknownIcon from '@/components/document/UnknownIcon.vue'
import PdfIcon from '@/components/document/PdfIcon.vue'
import JpgIcon from '@/components/document/JpgIcon.vue'
import Mp4Icon from '@/components/document/Mp4Icon.vue'
import {useResize} from "@/hook/useResizeEcharts";

export default {
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
    TxtIcon, XmindIcon, MdIcon, HexIcon, ExcelIcon, WordIcon, PptIcon, UnknownIcon, PdfIcon, JpgIcon, Mp4Icon
  },
  setup() {
    const rankDate = ref('');
    const pageSize = ref(5)
    var data = reactive({
      tableData1: [],
      total1: null,
      tableData2: [],
      total2: null,
    })
    var memberName = [];
    var uploadCount = [];
    var documentTypeStatic = [];

    const fileType = computed(() => {
      return (type) => {
        const typeMap = {
          'doc': WordIcon,
          'docx': WordIcon,
          'ppt': PptIcon,
          'pptx': PptIcon,
          'pdf': PdfIcon,
          'xls': ExcelIcon,
          'xlsx': ExcelIcon,
          'jpg': JpgIcon,
          'png': JpgIcon,
          'jpeg': JpgIcon,
          'xmind': XmindIcon,
          'md': MdIcon,
          'txt': TxtIcon,
          'hex': HexIcon,
          'mp4': Mp4Icon
        }
        return typeMap[type.toLowerCase()] || UnknownIcon
      }
    })

    const currentPage1 = ref(1);
    const currentPage2 = ref(1);
    const activeName = ref('first');
    const radio1 = ref('全部');
    const radio2 = ref('全部');
    const radio3 = ref('全部');

    const documentCategoriesCharts = ref(null)

    let chartInstance = null;
    let chartInstance2 = null

    const getDownloadRank = () => {
      FrontApi.getDownloadRank(radio1.value, currentPage1.value).then(res => {
        const DATA = res.data
        const RANK_LIST = DATA.rankList
        document.querySelector('#file-download-table .el-table__body').style.height = `${20 * RANK_LIST.length}%`
        data.tableData1 = RANK_LIST
        data.total1 = DATA.count
      })
    }
    const getReadRank = () => {
      FrontApi.getReadRank(radio2.value, currentPage2.value).then(res => {
        const DATA = res.data
        const RANK_LIST = DATA.rankList
        document.querySelector('#file-read-table .el-table__body').style.height = `${20 * RANK_LIST.length}%`
        data.tableData2 = RANK_LIST
        data.total2 = DATA.count
      })
    }
    const getUploadRank = () => {
      FrontApi.getUploadRank(radio3.value).then(res => {
        memberName = [];
        uploadCount = [];
        res.data.forEach(e => {
          memberName.push(e.createBy);
          uploadCount.push(e.operateCount);
        })
        // 设置chart宽度
        chartInstance2 = echarts.init(document.getElementById("memberUploadRankCharts"));
        chartInstance2.setOption({
          xAxis: {
            type: 'category',
            data: memberName
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          tooltip: {
            trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            axisPointer: {// 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          series: [
            {
              data: uploadCount,
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                color: '#00A298'
              }
            }
          ]
        });
      })
    }

    const getSpaceDocumentStatInfo = () => {

      FrontApi.getSpaceDocumentStatInfo().then(res => {
        res.data.forEach(e => {
          var s = {
            'value': e.count,
            'name': e.type
          }
          documentTypeStatic.push(s);

        })
        chartInstance = echarts.init(documentCategoriesCharts.value);
        // 绘制图表
        chartInstance.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: '2%',
            textStyle:{
              color:'var(--el-table-text-color)'
            }
          },
          grid: {
            bottom: 50
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '80%'],
              data: documentTypeStatic,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      })
    }

    let resizeTimer = null

    useResize(() => {
      if (resizeTimer) {
        clearTimeout(resizeTimer)
      }
      resizeTimer = setTimeout(() => {
        if (chartInstance) {
          chartInstance.resize();
        }
        if (chartInstance2) {
          chartInstance2.resize();
        }
      }, 300)

    })

    const Handlechange1 = () => {
      currentPage1.value = 1;
      getDownloadRank();
    }
    const Handlechange2 = () => {
      currentPage2.value = 1;
      getReadRank();
    }
    const Handlechange3 = () => {
      rankDate.value = '';
      getUploadRank();
    }
    const handleCurrentChange1 = () => {
      getDownloadRank();
    };
    const handleCurrentChange2 = () => {
      getReadRank();
    };
    const handleClick = () => {
    };
    const handleEdit = (index) => {
      if (index === 0) {
        return true;
      } else {
        return false;
      }
    }
    const dateChange = () => {
      var startTime = null;
      var endTime = null;
      if (rankDate.value != null) {
        startTime = rankDate.value[0];
        endTime = rankDate.value[1];
      } else {
        startTime = null;
        endTime = null;
      }

      FrontApi.getUploadRank(radio3.value, startTime, endTime).then(res => {
        memberName = [];
        uploadCount = [];
        res.data.forEach(e => {
          memberName.push(e.createBy);
          uploadCount.push(e.operateCount);
        })
        chartInstance2 = echarts.init(document.getElementById("memberUploadRankCharts"));
        chartInstance2.setOption({
          xAxis: {
            type: 'category',
            data: memberName
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          tooltip: {
            trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            axisPointer: {// 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          series: [
            {
              data: uploadCount,
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                normal: {
                  color: '#00A298'
                }
              }
            }
          ]
        });

      })
    }
    onMounted(() => {
      getDownloadRank();
      getReadRank();
      getUploadRank();
      getSpaceDocumentStatInfo()
    });

    return {
      data,
      rankDate,
      currentPage1,
      currentPage2,
      handleCurrentChange1,
      handleCurrentChange2,
      activeName,
      handleClick,
      radio1,
      radio2,
      radio3,
      handleEdit,
      getDownloadRank,
      getReadRank,
      Handlechange1,
      Handlechange2,
      Handlechange3,
      dateChange,
      zhCn,
      fileType,
      pageSize,
      documentCategoriesCharts
    }
  }
};
</script>
<style scoped>
:deep(.el-table) {
  --el-border-color-lighter: #ebeef500
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.statics-wrap {
  width: 100%;
  height: 120%;
  background-color: rgba(91, 192, 222, 0.10);
}

.row-wrap-one {
  height: 35%;
  width: 100%;
}

.row-wrap-two {
  height: 62%;
  width: 100%;
}

.document-categories {
  margin: 2.4rem 2.4rem 2.4rem 2.4rem;
  background-color: var(--el-bg-color);
  height: 40.5rem;
  width: calc(36% - 2.4rem);
}

.download-rank {
  width: calc(32% - 3.6rem);
  height: 40.5rem;
  background-color: var(--el-bg-color);
  margin: 2.4rem 2.4rem 2.4rem 0;
}

.read-rank {
  width: calc(32% - 3.6rem);
  height: 40.5rem;
  background-color: var(--el-bg-color);
  margin: 2.4rem 2.4rem 2.4rem 0;
}

.member-upload-rank {
  width: calc(100% - 4.8rem);
  height: calc(100% - 6.4rem);
  background-color: var(--el-bg-color);
  margin: 0 2.4rem 2.4rem 2.4rem;
}

.card-head {
  margin: 1.6rem;
  height: 2.1rem;
}

.card-head .title {
  font-weight: 600;
  color: var(--el-menu-text-color);
  font-size: 1.6rem;

}

.grid-content {
  padding: 0 1.6rem;
  width: calc(100% - 5.2rem);
  height: calc(100% - 9rem);
}

#documentCategoriesCharts {
  height: 35rem;
  width: 100% !important;
  top: -5%
}

#memberUploadRankCharts {
  height: 300px;
  width: 100% !important;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 2em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

:deep(.el-table .cell) {
  display: inline-flex;
  vertical-align: middle;
  padding: 0 1.2rem;
}

.document-categories .grid-content {
  height: calc(100% - 5.2rem);
}

:deep( .el-range-separator) {
  color: #00A298;
}

.cell svg {
  margin-right: 10px;
  height: 3rem;
  width: 3rem;
}

.docname-text {
  align-items: center;
  vertical-align: middle;
  display: inline-flex;
}

.el-pagination {
  height: 3.0rem;
}

.file-ranktable-wrap {
  height: 100%;
}

:deep(.el-scrollbar__view) {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

:deep(.el-table__body) {
  table-layout: fixed;
}

.radio3-style {
  float: right;
  padding-right: 12px;
}
</style>
